<template>
  <div class="full-height bg-white page-content content" style="padding: 0">
    <!-- 搜索区 -->
    <collapse ref="collapse" class="collapse-content after">
      <template v-slot:content>
        <yz-condition-filter
          v-model="queryParams"
          @resetSearch="resetSearch"
          @onSubmit="onSubmit"
        >
          <select-tooltip
            v-model="queryParams.workshop"
            isShowAll
            :multiple="false"
            :options="workshopOpt"
            msg="所在车间"
          ></select-tooltip>
        </yz-condition-filter>
        <div class="form-inline">
          <q-btn class="btn margin-r-10"
                 outline
                 color="primary"
                 @click="addLine"
                 label="新增"/>
        </div>
      </template>
    </collapse>
    <!-- 内容 -->
    <div class="flex justify-center items-center">
      <q-spinner-dots
        color="primary"
        size="3rem"
        v-if="loading"
      />
    </div>
    <div class="flex-1 overflow-auto scrollbar margin-b-20">
      <div class="content-wrapper" :class="{'margin-t-20': i !== 0}" v-for="(item, i) in linesData" :key="item.id">
        <div class="title flex justify-between items-center">
          <div>调度线名称: {{ item.dispatchingName }}</div>
          <div>所在车间: {{ item.workshopName }}</div>
          <div>
            <table-btn btnType="edit" @click="editLine(item)"/>
            <table-btn btnType="delete" @click="deleteLine(item.id)" tips="确定要删除此调度线吗？"/>
          </div>
        </div>
        <div class="content flex">
          <div class="box" v-for="(device, index) in item.devices" :key="device.deviceId">
            {{ device.deviceName }}
            <div class="arrow iconfont icontubiao-100" v-if="item.devices.length - 1 !== index"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 增加编辑 -->
    <AddEditDialog  ref="addEditDialog" :workshopOpt="workshopOpt" :lineData="editLineData" @success="onSubmit"/>
  </div>
</template>

<script>
import Collapse from 'src/components/collapse'
import { getWorkshops } from '../../boot/job/process-order'
import AddEditDialog from './components/fixed-scheduling/add-edit-dialog'
import { deleteDispatchingLine, getDispatchingLines } from '../../boot/system/fixed-scheduling'
import _ from 'lodash'

export default {
  name: 'fixed-scheduling',
  components: {
    Collapse,
    AddEditDialog
  },
  data () {
    return {
      queryParams: {
        workshop: 'all'
      },
      loading: false,
      workshopOpt: [],
      linesData: [],
      editLineData: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getWorkshops()
      this.getLine('')
    },
    // 查询按钮
    onSubmit () {
      const workshop = this.queryParams.workshop === 'all' ? '' : this.queryParams.workshop
      this.getLine(workshop)
    },
    // 获取加工车间
    getWorkshops () {
      getWorkshops().then(res => {
        this.workshopOpt = res.data
      })
    },
    // 重置
    resetSearch () {
      this.queryParams.workshop = 'all'
    },
    // 获取调度线
    getLine (workshopId) {
      this.loading = true
      this.linesData = []
      getDispatchingLines(workshopId).then(res => {
        this.linesData = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 新增调度线
     */
    addLine () {
      this.editLineData = null
      this.$refs.addEditDialog.showDialog()
    },
    editLine (item) {
      this.editLineData = _.cloneDeep(item)
      this.$refs.addEditDialog.showDialog()
    },
    // 删除调度线
    deleteLine (id) {
      deleteDispatchingLine(id).then(res => {
        if (res.code === '1200') {
          this.$message.success('删除调度线成功')
          const number = this.linesData.findIndex(item => item.id === id)
          this.linesData.splice(number, 1)
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
/deep/ .dialog-content .name {
  width 100px
}
/deep/.q-btn .q-icon, .q-btn .q-spinner{
  font-size 1rem
}

.content-wrapper {
  border 1px solid #D3D3D3
  border-radius 6px
  margin-left 20px
  margin-right 20px

  .title {
    height: 48px
    background #F3F3F3
    padding 0 20px
    border-top-right-radius 6px
    border-top-left-radius 6px
  }
}

.content {
  padding 20px

  .box {
    background #44D8C6
    box-shadow 0px 1px 5px 0px rgba(0, 0, 0, 0.15)
    border-radius 6px
    padding 0 20px
    color #fff
    font-size 16px
    line-height 32px
    height 32px
    font-weight 500
    position: relative
    margin-right 36px
    margin-bottom 12px

    .arrow {
      color #000
      font-size 22px
      position: absolute
      right -30px
      top 1px
    }
  }

  .addBox {
    background #F7B82D
  }

  .add-btn {
    background #FEFEFE
    border 1px dashed #999999
    font-weight 500
    color #999999
    cursor pointer
    user-select none
  }
}
</style>
